 <template>
  <div>
  <el-date-picker
      v-model="yearMonth"
      type="month"
      @change="getData"
      placeholder="选择月">
    </el-date-picker>
  <div id="myChart" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xdata:[],
      ydata:[],
      yearMonth:''
    }
  },
  mounted(){
    //this.drawLine();
      var date =  new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1;
      if(month>10){
           this.yearMonth=year+'-'+month;
       }else{
           this.yearMonth=year+'-0'+month;
       }
    this.loadData();
  },
  methods: {
    getData(val){
      var year = val.getFullYear();
      var month = val.getMonth()+1;
     // console.log(month);
      //  console.log(year);
      if(month>10){
           this.yearMonth=year+'-'+month;
       }else{
           this.yearMonth=year+'-0'+month;
       }
         console.log(this.yearMonth);
         this.loadData();
    },
    loadData() {
            this.xdata = [];
            this.ydata = [];

            this.$http.get('/api/mbs/accountStatement/incomeRecord?yearMonth=' + this.yearMonth).then((response) => {
                console.log(response.data);
                var showData = response.data.data;
                for (var i = 0; i < showData.length; i++) {
                    this.xdata.push(showData[i].monthDay);
                    this.ydata.push(showData[i].amount);
                }
                //   for (var opd in showData) {
                //         _this.xdata.push(opd.yearMonth);
                //         _this.ydataAdd.push(opd.addOps);
                //         _this.ydataUpdate.push(opd.updateOps);
                //         _this.ydataDel.push(opd.deleteOps);
                //   }
                //_this.xdata=JSON.parse(_this.xdata);
                // _this.xdata=['aa','bb','cc'];
                console.log(this.xdata + '...........');
                console.log(this.ydata + '...........');
                this.drawLine();
            });
        },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '收入统计图' },
            tooltip: {},
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
            
            xAxis: {
                data:this.xdata 
            },
            yAxis: {},
            series: [{
                name: '收入',
                type: 'line',
                data: this.ydata
            }]
        });
    }
  }
}
</script>
<style>
</style>